<template>
  <div
    style="
      position: relative;
      width: 100%;
      min-width: 545px;
      height: 100%;
      overflow: auto;
    "
  >
    <div class="container-echart" style="width: 100%">
      <div class="line-button">
        <div class="page-button">
          <div class="page-title" style="display: flex">
            <div class="fks-title-icon" />
            <span style="font-weight: bold; font-size: 16px; color: #191919">{{
              LANG.STATISTICAL_GRAPH
            }}</span>
          </div>
          <fks-radio-group
            v-model="tabPosition"
            class="radio-group"
            size="small"
            @change="handleClick"
          >
            <fks-radio-button label="today">
              {{ LANG.TODAY }}
            </fks-radio-button>
            <fks-radio-button label="yesterday">
              {{ LANG.YESTERDAY }}
            </fks-radio-button>
            <fks-radio-button label="seven_days">
              {{ LANG.SEVEN_DAYS }}
            </fks-radio-button>
            <fks-radio-button label="thirty_days">
              {{ LANG.THIRTY_DAYS }}
            </fks-radio-button>
          </fks-radio-group>
        </div>
      </div>
      <div
        id="line-echart"
        v-loading="loading"
        class="line-echarts"
        style="width: 95%; height: 200px; margin: auto"
      />
    </div>
    <div class="container-both">
      <div class="container-left">
        <div
          class="page-title"
          style="display: flex; padding-top: 10px; padding-bottom: 10px"
        >
          <div class="fks-title-icon" />
          <span style="font-weight: bold; font-size: 16px; color: #191919"
            >{{ LANG.MONTHLY_TRAFFIC_RANKING }}(top10)</span
          >
        </div>
        <div class="rank-table">
          <fks-table
            v-loading="rankLoading"
            :data="rankList"
            size="middle"
            max-height="auto"
          >
            <fks-table-column
              prop="dimension"
              :label="LANG.TRAFFIC_INTERFACE"
              align="left"
              min-width="200"
            />
            <fks-table-column :label="LANG.TRAFFIC_TIME" prop="value" />
            <fks-table-column max-width="120">
              <template slot-scope="scope">
                <fks-progress
                  :percentage="scope.row.percentage"
                  :color="theme"
                  :format="format"
                />
              </template>
            </fks-table-column>
          </fks-table>
        </div>
      </div>
      <div class="container-right">
        <div
          class="page-title"
          style="display: flex; padding-top: 10px; padding-bottom: 10px"
        >
          <div class="fks-title-icon" />
          <span style="font-weight: bold; font-size: 16px; color: #191919"
            >{{ LANG.MONTHLY_REQUEST_TIME_RANKING }}(top10)</span
          >
        </div>
        <div class="time-table">
          <fks-table
            v-loading="timeLoading"
            :data="timeList"
            size="middle"
            max-height="auto"
          >
            <fks-table-column
              prop="dimension"
              :label="LANG.TRAFFIC_INTERFACE"
              align="left"
              min-width="200"
            />
            <fks-table-column
              :label="LANG.TIME_CONSUMING + '(ms)'"
              prop="value"
            />
            <fks-table-column max-width="120">
              <template slot-scope="scope">
                <fks-progress
                  :percentage="scope.row.percentage"
                  :color="theme"
                  :format="format"
                />
              </template>
            </fks-table-column>
          </fks-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as types from '@/store/Getter/getterTypes.js'
import { getLine, getRank, getAvgTime, getEnum } from './api'
import * as echarts from 'echarts/core'
import { LineChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
echarts.use([
  LineChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  CanvasRenderer,
  LegendComponent
])
import Mix from '@/mixins/module'
export default {
  name: 'AuditStatistics',
  mixins: [Mix],
  data() {
    return {
      list: [],
      rankList: [],
      timeList: [],
      xAxisData: [],
      seriesData: [],
      echartEnum: [],
      tabPosition: 'today',
      param: '',
      loading: false,
      rankLoading: false,
      timeLoading: false,
      lineChart: ''
    }
  },
  computed: {
    theme() {
      return this.$store.getters[types.THEME]
    }
  },
  mounted() {
    this.getLineData(this.tabPosition)
    window.addEventListener('resize', () => {
      this.lineChart.resize()
    })
    this.getInterfaceRank()
    this.getInterfaceTime()
  },
  methods: {
    //初始化统计图
    initData() {
      this.xAxisData = new Array()
      this.seriesData = new Array()
      for (let i = 0; i < this.list.length; i++) {
        this.xAxisData.push(this.list[i].dimension)
        this.seriesData.push(this.list[i].value)
      }
    },
    //根据用户点击时间按钮查询数据
    handleClick(val) {
      this.tabPosition = val
      this.getLineData(this.tabPosition)
    },
    //绘制折线图
    drawLine() {
      this.lineChart = echarts.init(document.getElementById('line-echart'))
      var option = {
        color: this.theme,
        grid: {
          left: '10%',
          right: '10%',
          height: 'auto',
          bottom: 12,
          top: 8,
          containLabel: true
        },
        title: {},
        legend: {
          data: []
        },
        xAxis: {
          type: 'category',
          data: this.xAxisData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: this.LANG.REQUEST,
            type: 'line',
            data: this.seriesData
          }
        ],
        tooltip: {
          formatter: '{a}：<strong>{c}</strong>'
        }
      }
      this.lineChart.setOption(option)
    },
    //获取统计图数据
    getLineData(params) {
      this.loading = true
      getLine(params)
        .then((res) => {
          if (res.data) {
            this.list = res.data
            this.initData()
            this.drawLine()
          } else {
            this.list = []
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    //获取接口访问量数据
    getInterfaceRank() {
      this.rankLoading = true
      let list = []
      getRank()
        .then((res) => {
          if (res.status) {
            list = res.data
            list.map((item, index) => {
              this.rankList.push(
                Object.assign(item, {
                  percentage: this.getPercents(list[0].value, list[index].value)
                })
              )
            })
          } else {
            this.rankList = []
          }
          this.rankLoading = false
        })
        .catch(() => {
          this.rankLoading = false
        })
    },
    //获取接口访问时间数据
    getInterfaceTime() {
      this.timeLoading = true
      let list = []
      getAvgTime()
        .then((res) => {
          if (res.status) {
            list = res.data
            list.map((item, index) => {
              this.timeList.push(
                Object.assign(item, {
                  percentage: this.getPercents(list[0].value, list[index].value)
                })
              )
            })
          } else {
            this.timeList = []
          }
          this.timeLoading = false
        })
        .catch(() => {
          this.timeLoading = false
        })
    },
    //获取统计维度枚举
    getEchartEnum() {
      getEnum().then((res) => {
        this.echartEnum = res.data
      })
    },
    //计算两个整数之间的百分比
    getPercents(total, current) {
      total = parseFloat(total)
      current = parseFloat(current)
      if (isNaN(current) || isNaN(total)) {
        return null
      }
      return total <= 0 ? 0 : Math.round((current / total) * 10000) / 100.0
    },
    //设置排行榜后的文字
    format(percentage) {
      return ''
    }
  }
}
</script>
<style lang="scss" scoped>
.container-echart {
  position: relative;
  display: inline-block;
  padding-bottom: 40px;
  overflow: hidden;
  background: #fff;

  .page-button {
    display: flex;
    justify-content: space-between;
  }
}

.container-both {
  position: relative;
  display: flex;
  width: 100%;
}

.container-left {
  position: relative;
  display: inline-block;
  flex: 1;
  width: calc(50% - 8px);
  height: auto;
  padding: 16px;
  margin-top: 16px;
  margin-right: 8px;
  background: #fff;
}

.container-right {
  position: relative;
  display: inline-block;
  flex: 1;
  width: calc(50% - 8px);
  height: auto;
  padding: 16px;
  margin-top: 16px;
  margin-left: 8px;
  background: #fff;
}

.line-button {
  padding: 20px;
}

.rank-echarts {
  padding: 20px;
}

.time-echarts {
  padding: 20px;
}
</style>